<template>
  <div class="patient-edit-container">
    <div style="padding: 40px">
      <div class="page-title">患者编辑</div>
      <div style="margin: 30px 0; font-size: 22px;">
        <div>患者姓名：<el-input v-model="patientInfo.name" style="width: 150px;" placeholder="请输入患者姓名" />
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
          病历号：<el-input v-model="patientInfo.patientCode" style="width: 150px;" placeholder="请输入病历号" />
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
           性别：<el-input v-model="patientInfo.sex" style="width: 150px;" placeholder="请输入性别" /> 
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
           身份证号：<el-input v-model="patientInfo.idNo" style="width: 200px;" placeholder="请输入身份证号" />
          </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <div style="margin-top: 10px;">
          病情描述：<el-input v-model="patientInfo.diagnosis" style="width: 350px;" placeholder="请输入病情描述" />
        </div>
      </div>
      
        <el-form-item label="病区:" prop="region" style="margin-bottom: 20px; font-size: 20px;">
          <el-select v-model="selectedWardArea" placeholder="请选择病区" style="width: 200px" @change="getWardAreaBeds">
            <el-option v-for="area in wardAreas" :key="area.id" :label="area.name" :value="area.id" />
          </el-select>
        </el-form-item>
       
     <div>
      <el-button type="primary" style="margin-bottom: 30px; margin-left: 500px;" @click="savePatient">保存</el-button>
      <el-button type="info" @click="router.back()" style="margin-bottom: 30px;">返回</el-button>
     </div>
    </div>

    <div class="bed-allocation-container">
      <div class="page-title" style="display: flex; align-items: center;">床位分配:</div>
      <div style="width: 100%; display: flex; flex-direction: column; align-items: center;">
        <div v-for="ward in wardBeds" :key="ward.value" class="ward-section" style="width: 100%; display: flex; align-items: center; margin-bottom: 40px;">
          <div class="ward-title" style="min-width: 80px;">{{ ward.name }}:</div>
          <div class="beds-container" style="flex: 1; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 40px;">
            <div  v-for="bed in ward.children"  :key="bed.value"  :class="['bed-box', bed.occupied ? 'bed-occupied' : 'bed-empty', patientInfo.bedId === bed.value ? 'bed-selected' : '', bed.patientId === patientInfo.id ? 'bed-current-patient' : '']"
              @click="selectBed(ward.value, bed.value, bed.occupied)" style="margin-bottom: 20px; width: 200px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 18px;">
              {{ bed.patientName ? bed.name + '（' + bed.patientName + '）' : bed.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
import { reactive, ref, watch, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const route = useRoute()

// 病区数据
const selectedWardArea = ref([])

// 获取患者信息
const getpatientInfo = async () => {
await proxy.http.get(`api/EquipmentController/GetPatientDetail/?patientCode=${route.query.patientCode}`).then(res => {
  Object.assign(patientInfo.value, res.data)
})
}

// 获取病区数据
const wardAreas = ref([])
const getWardAreas = async () => {
  await proxy.http.get('api/EquipmentController/GetWardArea').then(res => {
    wardAreas.value = res.data
  })
}
// 获取病房床位数据
const wardBeds = ref([])
const getWardAreaBeds = async (wardAreaCode) => {
  await proxy.http.get(`api/EquipmentController/GetWardAreaBeds?wardAreaId=${wardAreaCode}`).then(res => {
  
    wardBeds.value = res.data
  })
}


// 选择床位
const selectBed = (wardId, bedId, occupied) => {
  if (occupied) {
    ElMessage.warning('该床位已被占用');
    return;
  }
  patientInfo.value.wardId = wardId;
  patientInfo.value.bedId = bedId;
};

const patientInfo = ref({
    id:0,
   patientCode:"",
   name:"",
   officeCode:"",
   wardAreaCode:"",
   nursingUnit:"",
   wardCode:"",
   bedCode:"",
   sex:"",
   age:"",
   idNo:"",
   phone:"",
   address:"",
   sOSName:"",
   diagnosis:"",
   wardId:"",
   bedId:""
})

const savePatient = async () => {
  await proxy.http.post('api/EquipmentController/UpdPatient', patientInfo.value).then(res => {
    console.log(patientInfo.value)
    if(res > 0){
      ElMessage.success('保存成功')
      getWardAreaBeds(selectedWardArea.value)
    }else{
      ElMessage.error('保存失败')
    }
  })
}


onMounted(() => {
  getpatientInfo()
  getWardAreas().then(() => {
    // 假如 wardAreas.value 有数据，自动选第一个病区并加载床位
    if (wardAreas.value.length > 0) {
      selectedWardArea.value = wardAreas.value[0].id
      getWardAreaBeds(wardAreas.value[0].id)
    }
  })
})

</script>


 <style scoped>
.bed-allocation-container {
  padding: 10px;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 35px;
  color: #303133;
}

.bed-allocation-card {
  margin-bottom: 20px;
}

.card-header {
  margin-bottom: 20px;
}

.loading-container {
  padding: 20px;
}

.ward-section {
  margin-bottom: 30px;
}

.ward-title {
  font-size: 18px;
  margin-bottom: 15px;
  float: left;
  margin-left: 50px;
  margin-right: 50px;
  color: #303133;
}

.beds-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.bed-box {
  width: 200px;
  height: 50px;
  border: 2px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
  margin-left: 20px;
}

.bed-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.bed-occupied {
  background-color: #c2e7b8;
  border-color: #85ce61;
  color: #2c5e0f;
}

.bed-empty {
  background-color: #fff;
  border-color: #dcdfe6;
  color: #333;
}

.bed-selected {
  background-color: #c2e7b8;
  border-color: #85ce61;
  color: #2c5e0f;
}

.bed-name {
  font-size: 16px;
  margin-bottom: 5px;
}

.bed-status {
  font-size: 14px;
  color: inherit;
}

.bed-detail {
  padding: 10px;
}

.bed-detail p {
  margin-bottom: 10px;
  font-size: 14px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.no-data {
  padding: 40px 0;
  text-align: center;
}

.bed-current-patient {
  border-color: #67c23a !important;
  background-color: #e1f3d8 !important;
}
</style>
